import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//PostCss：引入自定义补全
import autoprefixer from 'autoprefixer'
//使用vite-plugin-mock插件
import { viteMockServe } from "vite-plugin-mock";
//vite-plugin-html插件，用于修改index.html模板文件中的内容
import { createHtmlPlugin } from 'vite-plugin-html';
// vant按需加载
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { VantResolver } from '@vant/auto-import-resolver';
//native ESM
import legacy from '@vitejs/plugin-legacy'
//路径别名
import path from "path";
//postcss,px转rem
import pxtorem from 'postcss-pxtorem'

// https://vitejs.dev/config/
export default defineConfig(({mode}) => {
	return {
		//部署路径
		base: './',
		server: {
			proxy: {
			'/api': {
					target: '127.0.0.1:3000',
					changeOrigin: true
				}
			}
		},
		resolve:{
			alias: {
				"@": path.resolve(__dirname, "src")
			},
		},
		plugins: [
			vue(),
			AutoImport({
				resolvers: [VantResolver()],
			}),
			Components({
				resolvers: [VantResolver()],
			}),
			legacy({
				targets: ['defaults', 'not IE 11']
			}),
			createHtmlPlugin({
				inject: {
					data: {
						env: mode
					},
				},
			}),
			viteMockServe({
				// default
				mockPath: './mock',
				supportTs:false,
				localEnabled: true,
				prodEnabled:false
			})
		],
		css: {
			preprocessorOptions: {
				less: {
					javascriptEnabled: true,
					additionalData:  `@import "${path.resolve(__dirname, 'src/style/common.less')}";`
				}
			},
			postcss:{
				plugins:[
					autoprefixer,
					pxtorem({
						rootValue: 37.5, // 设计稿宽度为375时，rootValue设为37.5
						propList: ['*'], // 需要转换的属性
						selectorBlackList: ['.not'], // 匹配不被转换为rem的选择器
					}),
				]
			}
		},
	}
})
